<template>
  <div>
    <div class="LineLossAnalysis" style="height: 100%" v-if="!isDetail">
      <div class="LineLossAnalysis_header">
        <el-input
          v-model="searchValue"
          size="default"
          placeholder="请输入设备编号"
          style="margin-right: 10px"
        >
          <template #append>
            <el-button :icon="Search" @click="searchFn" />
          </template>
        </el-input>
        <!-- <el-select
        style="color: #000"
        v-model="selectValue"
        class="m-2"
        placeholder="请选择"
        @change="searchFn"
      >
        <el-option label="进行中" value="进行中" />
        <el-option label="终止" value="终止" />
      </el-select> -->
        <!-- <el-button type="primary" class="createBtn" @click="dialogVisible = true"
        >创建实验</el-button
      > -->
      </div>
      <div
        class="LineLossAnalysis_content"
        @scroll.passive="getScrollData($event)"
        v-loading.body="loading"
      >
        <div v-if="!list.length" class="noData">暂无数据</div>
        <template v-else>
          <div class="contentItem" v-for="(item, index) in list" :key="index">
            <!-- <div class="content-detail" @click="toDetail(item)">查看图表</div> -->
            <div class="contentItem_rows">
              <span>设备编号：</span>
              <span
                @click="goPage(item)"
                style="color: #03a9f4; border-bottom: 1px dashed #03a9f4"
                >{{ item?.deviceNo }}</span
              >
            </div>
            <div class="contentItem_rows">
              <span>设备状态：</span>
              <span>{{ item?.deviceStatus }}</span>
            </div>
            <!-- <div class="contentItem_rows">
            <span>心跳更新时间：</span>
            <span>{{ item?.heartbeatTime }}</span>
          </div> -->
            <div class="contentItem_rows">
              <span>上线时间：</span>
              <span>{{ item?.creatTime }}</span>
            </div>
            <!-- <div class="contentItem_rows">
            <span>离线时间：</span>
            <span>{{ item?.offLineTime }}</span>
          </div>
          <div class="contentItem_rows">
            <span>设备来源：</span>
            <span>{{
              item?.deviceSouce == 0 ? "TCP长链接" : "excel导入"
            }}</span>
          </div> -->
            <!-- <div class="contentItem_rows">
            <span>excel导入时间：</span>
            <span>{{ item?.importTime }}</span>
          </div> -->
          </div>
        </template>
      </div>
    </div>

    <div v-else>
      <ManageExperiment
        v-model:isDetail="isDetail"
        :deviceNo="currentDeviceNo"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue"
import { useRouter } from "vue-router"
import { getHomeDeviceList } from "@/api"
import { debounce } from "@/util/tools"
import { useManageExperiment } from "@/hooks/useManageExperiment"
import ManageExperiment from "@/views/ManageExperiment/index.vue"
const { setExperimentDataFn } = useManageExperiment()

const $router = useRouter()

const searchValue = ref("")

onMounted(() => {
  getList()
})

const list = ref([])

// const goToCreate = () => {
//   getDeviceList(deviceNo.value).then((res) => {
//     if (res.code === 200) {
//       $router.push({
//         path: "/manageExperiment/createExperiment",
//         query: { deviceNo: deviceNo.value }
//       })
//     } else {
//       ElMessage.error(res.msg)
//     }
//   })
// }

const sign = ref(80)
const getScrollData = (event) => {
  if (loading.value) return
  let scrollBottom =
    event.target.scrollHeight -
    event.target.scrollTop -
    event.target.clientHeight
  if (scrollBottom < 200) {
    getList()
  }
  // var oScrollTop = event.target.scrollTop
  // if (oScrollTop > 80) {
  //   //write your code
  // }
  // if (oScrollTop < 80) {
  //   //write your code
  // }
  // if (oScrollTop > sign.value) {
  //   sign.value = oScrollTop //更新scrollTop
  //   if (scrollBottom < 50) {
  //     getList()
  //   }
  // }
  // if (oScrollTop < sign.value) {
  //   sign.value = oScrollTop //更新scrollTop
  // }
}
const getScroll = debounce(getScrollData, 500)

const pageNumber = ref(1)
const getService = ref(true)
const loading = ref(false)
const selectValue = ref("")
const getList = async () => {
  if (!getService.value) return
  loading.value = true
  const res = await getHomeDeviceList({
    pageNumber: pageNumber.value,
    pageSize: 10,
    testNo: searchValue.value
    // status: selectValue.value
  })
  loading.value = false
  if (res) {
    const { rows } = res
    getService.value = rows
    if (rows && rows.length < 10) {
      getService.value = false
    } else {
      getService.value = true
      pageNumber.value = pageNumber.value + 1
    }
    list.value = [].concat(list.value).concat(rows)
  }
}

const searchFn = () => {
  pageNumber.value = 1
  getService.value = true
  list.value = []
  getList()
}

const toDetail = (rowData) => {
  setExperimentDataFn(rowData)
  $router.push({
    path: "/lineLossAnalysis/detail"
  })
}

const isDetail = ref(false)
const currentDeviceNo = ref(null)
const goPage = (item) => {
  isDetail.value = true
  currentDeviceNo.value = item.deviceNo
}
</script>

<style scoped lang="less">
@import "./index.less";
</style>
